<template>
	<view :class="['bigcontainer',props.selected?'active':'']">
		<view class="container">
			<view v-if="props.selected" class="tixing"><icon size="15" style="transform:rotate(135deg);position: absolute;top: -35rpx;" type="success_no_circle" color="#0f0c04"></icon></view>
			<view class="avatur">
				<image :src="props.avatur"></image>
			</view>
			<view class="information">
				<view class="content">名字：{{props.name}}</view>
				<view class="content">性别：{{props.gender===1?'男':'女'}}</view>
				<view class="content">服务地址：{{props.address}}</view>
			</view>
		</view>
		<view @click.stop="goDetail()" class="detail">
			查看详情
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive,defineProps} from "vue"
	interface Props {
		people_id:string,
	   avatur:string, 
	   name:string,
	   gender:string,
	   address:string,
	   selected:boolean
	}  
	  
	const props = defineProps<Props>();
	
	function goDetail(){
		uni.navigateTo({
			url:"/pages/jiyang/peopledetail?people_id="+props.people_id
		})
	}
</script>

<style lang="scss">
	.bigcontainer{
		width: 100%;
		margin-bottom: 20rpx;
		border:4rpx solid #ebebeb;
		position: relative;
		border-radius: 20rpx;
		background-color: #ffffff;
		
		&.active{
			border-color:#f2e283;
			background-color: #fefef6;
		}
		
		.detail{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 10rpx 0;
			letter-spacing: 0.1em;
			
			&:active{
				background-color: #efefef;
			}
		}
	}
	.container{
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		border-bottom: 2rpx solid #e6e6e6;
		padding: 30rpx;
		
		.tixing{
			position: absolute;
			top: -40rpx;
			right: -50rpx;
			width: 30rpx;
			border-top: 40rpx solid #f3e283; // 梯形的高
			border-right: 40rpx solid transparent; // 往右延伸
			border-bottom: 50rpx solid transparent; // 整个div的高
			border-left: 40rpx solid transparent; // 往左延伸
			transform:rotate(-135deg)
		}
		
		.avatur{
			width: 40%;
			display: flex;
			align-items: center;
			justify-content: center;
			
			image{
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
			}
		}
		
		.information{
			width: 60%;
			
			.content{
				margin-bottom: 10rpx;
			}
		}
	}
</style>
